<template>
	<view>
		<!-- 标题 start -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">未报名项目</block>
		</cu-custom>
		<!-- 标题 end -->
		<!-- 搜索 start -->
		<u-search v-model="title" @search="initData"></u-search>
		<!-- 搜索 end -->
		<!-- 列表 start -->
		<ProjectList v-on="listItemEvent" :config="listItemConfig" v-model="infoList">
			<template v-slot:default="item" class="row-warpper option">
				<button style="margin: 5px;" @click="startRegister(item.info)" size="mini" class="btn"
					type="primary">我要报名</button>
				<button style="margin: 5px;" @click="startViewDetail(item.info)" size="mini" class="btn"
					type="primary">项目详情</button>
			</template>
		</ProjectList>
		<!-- 列表 end -->
		<!-- 操作弹窗 start -->
		<uni-popup ref="option" type="dialog">
			<view class="option-dialog col-warpper">
				<view class="title row-warpper">
					更多操作
				</view>
				<view class="row-warpper option">
					<button v-on="detailEvent" class="btn" type="primary">项目详情</button>
					<button v-on="signUpEvent" class="btn" type="primary">我要报名</button>
				</view>
			</view>
		</uni-popup>
		<!-- 操作弹窗 end -->
		<!-- 项目详情弹窗 start -->
		<uni-popup ref="projectDetail" type="dialog">
			<view class="option-dialog">
              <ViewDetail :project-detail="projectDetail" title="项目详情"/>
              <view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
                <button @click="$refs.projectDetail.close()" class="cancel-btn" size="mini" type="default">取消</button>
              </view>
            </view>
		</uni-popup>
		<!-- 项目详情弹窗 end -->
		<!-- 我要报名弹窗 start -->
		<uni-popup ref="signUp" @ok="sumitProjectRegist" title="项目报名">
			<view class="signUp-dialog col-warpper">
              <view class="option-con">
                <view class="title row-warpper">我要报名</view>
                <view class="option">
                  <uni-section type="line" title="项目名称">
                    {{ projectDetail.xmgg_title }}
                  </uni-section>
                  <uni-section type="line" title="中介机构">
                    {{ companyInfo.companyname }}
                  </uni-section>
                  <uni-section type="line" title="上传资质附件" subTitle="*必填" subTitleColor="#e33939">
                    <view class="value row-warpper" style="justify-content: flex-start;flex-wrap: wrap">
                      <button style="margin: 0;" @click="uploadFujian" size="mini"
                              type="primary">点击上传
                      </button>
                      <a style="margin-left: 5px;" :href="this.registerForm.fujian">
                        {{ this.fujian }}
                      </a>
                    </view>
                  </uni-section>
                  <uni-section type="line" title="其他证明材料">
                    <view class="value row-warpper" style="justify-content: flex-start;flex-wrap: wrap;">
                      <button style="margin: 5px 0;" @click="uploadZhengming" size="mini"
                              type="primary">点击上传
                      </button>
                      <a style="margin-left: 5px;" :href="this.registerForm.zhengming">
                        {{ this.zhengming }}
                      </a>
                    </view>
                  </uni-section>
                  <uni-section type="line" title="报名时间">
                    {{ nowTime }}
                  </uni-section>
                </view>
              </view>
              <view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
                <button @click="$refs.signUp.close()" class="cancel-btn" size="mini" type="default">取消</button>
                <button @click="handleRegister" size="mini" type="primary">确定</button>
              </view>
            </view>
		</uni-popup>
      <!-- 我要报名弹窗 end -->
	</view>
</template>

<script>
import projectRequest from "../../../common/request/projectRequest.js"
import ProjectList from "./components/ProjectList.vue"
import sysRequest from "../../../common/request/sysRequest.js"
import onlineRequest from "../../../common/request/onlineRequest.js"
import baomingRequest from "../../../common/request/baomingRequest.js"
import uploadFile from "./mixins/uploadFile.js"
import bpmRequest from "../../../common/request/bpmRequest";
import ViewDetail from "./components/ViewDetail";

export default {
  mixins: [bpmRequest, baomingRequest, uploadFile, projectRequest, sysRequest, onlineRequest],
  components: {ProjectList, ViewDetail},
  created() {
    // 获取部门信息和中介机构主体信息后 加载数据
    this.getIdentity(() => {
      this.initData()
    })
  },
  computed: {
    nowTime() {
      const now = new Date()
      let year = now.getFullYear()
      let month = this.makeDateStr(now.getMonth() + 1)
      let day = this.makeDateStr(now.getDate())
      let hover = this.makeDateStr(now.getHours())
      let minute = this.makeDateStr(now.getMinutes())
      let sec = this.makeDateStr(now.getSeconds())
      return `${year}-${month}-${day} ${hover}:${minute}:${sec}`
    },
    registerForm() {
      return {
        fujian: this.fujian ? `${this.$config.apiUrl}/sys/common/static/${this.fujian}` : undefined,
        zhengming: this.zhengming ? `${this.$config.apiUrl}/sys/common/static/${this.zhengming}` : undefined,
        baomingTime: this.nowTime,
        companyid: this.companyInfo.id,
        departid: this.currentUserDeparts.id,
        jgbm: this.currentUserDeparts.orgCode,
        jgmc: this.currentUserDeparts.departName,
        username: this.currentUserDeparts.createBy,
        xmid: this.projectDetail.id,
        xmmc: this.projectDetail.title
      }
    }
  },
  data() {
    return {
      // --- 配置列表 ---
      shifouList: [],
      zdxmList: [],
      fujian: undefined,
      zhengming: undefined,
      //  --- 数据 ---
      infoList: [],
      title: undefined,
      currentUserDeparts: {}, // 部门信息
      companyInfo: {}, // 主体信息
      activeProject: {}, // 当前项目
      projectDetail: {},
      //  --- 组件配置 ---
      // 列表
      listItemConfig: {
        showArrow: false,
        clickable: false
      },
      listItemEvent: {
        beClick: (item) => {
          this.activeProject = item
          this.getProjectDetail(this.activeProject.id, {}, data => {
            this.projectDetail = data
            this.$refs.option.open()
          })
        }
      },
      // 操作按钮
      detailEvent: { // 项目详情按钮事件
        click: () => {
          this.$refs.projectDetail.open()
        }
      },
      signUpEvent: { // 注册按钮事件
        click: () => {
          this.$refs.signUp.open()
        }
      },
      // 表单抽屉
      detatilDrawerConfig: {
        width: 350,
      },
      signUpDrawerConfig: {
        width: 350
      },
      closeBtnEvent: {
        click: () => {
          this.$refs.projectDetail.close()
        }
      },
      closeBtnConfig: {}
    }
  },
  methods: {
    /**
     * 预览详情
     * @param {Object} item
     */
    startViewDetail(item) {
      this.activeProject = item
      this.getProjectDetail(this.activeProject.id, {}, data => {
        this.projectDetail = data
        this.$refs.projectDetail.open()
      })
    },
    /**
     * 开始报名
     * @param {Object} item
     */
    startRegister(item) {
      this.activeProject = item
      this.getProjectDetail(this.activeProject.id, {}, data => {
        this.projectDetail = data
        this.fujian = undefined
        this.zhengming = undefined
        this.$refs.signUp.open()
      })
    },
    /**
     * 报名
     */
    handleRegister() {
      if (this.fujian === undefined) {
        this.$tip.toast("请上传资质附件！")
        return
      }
      this.baoming(this.registerForm, data => {
        if (data.success) {
          const pd = {
            id: data.result.id,
            tableName: "zjcs_baoming_con"
          }
          this.startProcess(pd, () => {
            this.$tip.toast("报名成功")
            this.$refs.signUp.close()
            this.$refs.option.close()
            this.initData()
          })
        } else {
          this.$tip.toast(data.message)
          this.$refs.signUp.close()
          this.$refs.option.close()
          this.initData()
        }
      })
    },
    /**
     * 上传附件
     */
    uploadFujian() {
      this.ChooseImage(data => {
        this.fujian = data.data.message
      })
    },
    /**
     * 上传其他证明材料
     */
    uploadZhengming() {
      this.ChooseImage(data => {
        this.zhengming = data.data.message
      })
    },
    /**
     * 提交
     */
    sumitProjectRegist() {
      cosole.log("", this.currentUserDeparts)
    },
    /**
     * 处理时间字符串 <10 则加0 >10则不加
     * @param {Object} timeNum
     */
    makeDateStr(timeNum) {
      return timeNum < 10 ? `0${timeNum}` : timeNum
    },
    /**
     * 获取部门信息和中介机构主体信息
     */
    getIdentity(callback) {
      // 所属部门信息
      this.getCurrentUserDeparts({}, data => {
        data.list.forEach(item => {
          if (item.orgCode === data.orgCode) {
            this.currentUserDeparts = item
          }
        })
        const params = {
          departid: this.currentUserDeparts.id
        }
        // 中介机构主体信息
        this.getCompanyInfo(params, ret => {
          if (ret.total === 0) {
            this.$tip.error("请添加中介机构机构主体信息!")
            return
          }
          if (ret.records[0].bpm_status !== '3') {
            this.$tip.error("中介机构主体信息未审核通过，不能进行项目报名！")
            return
          }
          this.companyInfo = ret.records[0]
          callback()
        })
      })
    },
    /**
     * 加载数据
     */
    initData() {
      const params = {
        column: "createTime",
        order: "desc",
        field: "id,,title,yezhuname,xmlxr,xmlxrdh,selectmode_dictText,state_dictText,baoming_dictText,action",
        pageNo: 1,
        pageSize: 10,
        departid: this.currentUserDeparts.id,
        companyid: this.companyInfo.id,
        ifbm: 0,
        title: this.title
      }
      this.getNobmsearch(params, data => {
        this.infoList = data
      })
    },
  },
}
</script>

<style lang="less" scoped>
	/deep/ .uni-section-content {
		padding: 0 10px
	}

	.option {
		padding: 5px;

		.btn {
          margin: 0 4px;
        }
	}

	.option-dialog {
      padding: 12px;
      min-height: 80vh;
      min-width: 100vw;
      background-color: #ffffff;
      //border-radius: 0 0 14px 14px;

      .title {
        align-self: stretch;
        justify-content: center;
        padding: 5px;
        color: #909399;
        border-bottom: 1px solid #909399;
      }

      .option {
			padding: 5px;

			.btn {
				margin: 5px;
			}

			.radio-con {
				label {
					margin: 0 5px;

					radio {
						margin-right: 3px;
					}
				}
			}
		}
	}

	.project-detail {
      justify-content: center;
      height: 30vh;
      padding: 50px 15px 15px 15px;
    }

	// --- 我要报名弹窗 ---
	.signUp-dialog {
      padding: 12px;
      min-height: 80vh;
      min-width: 100vw;
      background-color: #ffffff;
      //border-radius: 0 0 14px 14px;
      justify-content: space-between;
      align-items: stretch;

      .option-con {
        height: 80vh;

        .title {
          align-self: stretch;
          justify-content: center;
          padding: 5px;
          color: #909399;
          border-bottom: 1px solid #909399;
          margin-bottom: 2px;
        }

      }

      .title-con {
        justify-content: center;
      }

      .value {
        width: 65vw;
        white-space: nowrap;
        overflow: scroll;
      }
    }

	.submit-con {
		uni-button {
			margin: 0;
		}

		.cancel-btn {
			margin-right: 5px;
		}
	}
</style>
